<!--  -->
<template>
  <div>
    <h2>这是Person组件</h2>
    <input type="text"
           placeholder="添加一个人员"
           v-model="name">
    <button @click="addPerson">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加一个远程服务器人员</button>
    <h1 style="color:red">上面Counter组件里面的num为:{{num}}</h1>
    <ul>
      <li v-for="item in personList"
          :key="item.id">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
      name: ''
    }
  },
  methods: {
    addPerson () {
      const obj = {
        'id': new Date().getTime(),
        'name': this.name
      };
      this.$store.commit("PersonAbout/ADD_PERSON", obj);
      // 清空输入框
      this.name = ''
    },
    addWang () {
      const obj = {
        'id': new Date().getTime(),
        'name': this.name
      };
      this.$store.dispatch("PersonAbout/ADD_WANG", obj)
      this.name = ''
    },
    addPersonServer () {
      axios.get("https://api.uixsj.cn/hitokoto/get?type=social").then((res) => {
        const p = { id: new Date().getTime(), name: res.data }
        this.$store.commit("PersonAbout/ADDPERSONSERVER", p)
      }).catch((err) => {
        console.log(err);
        return err.message
      })
    }
  },
  computed: {
    personList () {
      return this.$store.state.PersonAbout.personLists
    },
    num () {
      return this.$store.state.CounterAbout.num
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>